<template>
  <el-dialog
    :visible.sync="isShow"
    destroy-on-close
    :title="title"
    width="400px"
    top="60px"
    :close-on-click-modal="false"
  >
    <el-form ref="form" :model="fields" :rules="rules" label-width="80px">
      <el-form-item label="上级分类:" prop="pid">
        <el-cascader
          style="width:100%"
          v-model="fields.pid"
          size="small"
          :options="parents"
          :props="{
            label: 'name',
            value: 'id',
            children: 'childrens',
            emitPath: false
          }"
          clearable
          placeholder="请选择上级分类"
        />
      </el-form-item>
      <el-form-item label="分类名称:" prop="name">
        <el-input
          v-model.trim="fields.name"
          autocomplete="off"
          size="small"
          placeholder="请输入分类名称"
          maxlength="30"
        />
      </el-form-item>
      <el-form-item label="分类编码:" prop="code">
        <el-input
          v-model.trim="fields.code"
          autocomplete="off"
          size="small"
          placeholder="请输入分类编码"
          maxlength="30"
        />
      </el-form-item>
      <el-form-item label="行业模板:" prop="formTemplate">
        <el-select
          style="width: 100%;height:32px"
          v-model="fields.formTemplate"
          filterable
          clearable
          placeholder="请选择行业模板"
          :loading="loading"
        >
          <el-option
            v-for="item in formList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button :loading="loading" size="mini" @click="closePage"
        >取消</el-button
      >
      <el-button
        :loading="loading"
        type="primary"
        size="mini"
        @click="onOkBtnClick"
        >保存</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    value: {
      type: Object,
      default: () => Object.create({}),
    },
  },
  data() {
    let that = this
    return {
      loading: false,
      isShow: true,
      dialog: false,
      formList: [
        { label: '农业模板', value: 'hj' },
        { label: '烟草模板', value: 'gj' },
        { label: '水果及制品模板', value: 'gj' },
        { label: '蔬菜及制品模板', value: 'gj' },
        { label: '家具制造机械模板', value: 'gj' },
        { label: '木材加工模板', value: 'gj' },
      ],
      parents: [
        {
          id: '1d61ec1791102f45f0f52b52e2ab6b7b',
          pid: null,
          name: '建筑建材',
          code: 'jzjc',
          createTime: '2020-08-23 17:25:50',
          updateTime: '2020-08-23 17:32:34',
          childrens: [
            {
              id: 'hj',
              pid: '1d61ec1791102f45f0f52b52e2ab6b7b',
              name: '桁架',
              code: 'hj',
              createTime: '2020-08-23 17:31:04',
              updateTime: '2020-11-29 00:23:04',
            },
            {
              id: 'gj',
              pid: '1d61ec1791102f45f0f52b52e2ab6b7b',
              name: '箍筋',
              code: 'gj',
              createTime: '2020-08-23 17:30:58',
              updateTime: null,
            },
          ],
        },
        {
          id: 'ycl',
          pid: null,
          name: '农林牧渔',
          code: 'nlmy',
          createTime: '2020-08-23 17:25:50',
          updateTime: '2020-08-23 17:32:34',
          childrens: [
            {
              id: 'gj',
              pid: 'ycl',
              name: '豆类',
              code: 'dl',
              createTime: '2020-08-23 17:31:04',
              updateTime: '2020-11-29 00:23:04',
            },
            {
              id: 'gb',
              pid: 'ycl',
              name: '粮食',
              code: 'ls',
              createTime: '2020-08-23 17:30:58',
              updateTime: null,
            },
          ],
        },
      ],
      fields: {
        pid: null,
      },
      rules: {
        name: [
          {
            required: true,
            message: '请输入名称',
            trigger: 'blur',
          },
        ],
        code: [
          {
            required: true,
            message: '请输入编码',
            trigger: 'blur',
          },
        ],
      },
      title: '行业分类新增',
    }
  },
  watch: {
    isShow: function() {
      this.$emit('input', null)
    },
  },
  created() {
    if (null == (this.value.id || null)) {
      this.title = '行业分类新增'
    } else {
      this.title = '行业分类编辑'
      this.fields = this.value
    }
  },
  computed: {},
  methods: {
    closePage() {
      this.$emit('colseDialog')
    },
    onOkBtnClick() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.loading = true
          if (null == (this.value.id || null)) {
            this.$notify({
              title: '保存成功',
              type: 'success',
              duration: 1500,
            })
            this.$emit('colseDialog')
          } else {
            this.$notify({
              title: '保存成功',
              type: 'success',
              duration: 1500,
            })
            this.$emit('colseDialog')
          }
        }
      })
    },
  },
}
</script>

<style scoped></style>
